import store from '../../store'
import { useState } from 'react'

const ChatLog = () => {
    // 声明状态，用于组件受控
    let [val,setVal] = useState('')
    // 从redux解构数据
    let {chatlog} = store.getState()
    // 通过redux数据创建页面结构
    let lis = chatlog.map((item,index)=>{
        return <li key={index}>{item}</li>
    })
    // 组件受控的处理函数
    let handleChange = (e) => {
        setVal(e.target.value)
    }
    // 点击发送按钮处理函数
    let handleClick = () => {
        // 通过dispatch变更reduxd中的chatlog数据
        store.dispatch({type:'ADD_CHAT',payload:val})
    }
    return(
        <fieldset>
            <legend>聊天日志</legend>
            <input type="text" value={val} onChange={handleChange}/>
            <button onClick={handleClick}>点击发送</button>
            <ul>
                {lis}
            </ul>
        </fieldset>
    )
}
export default ChatLog